<template>
	<view class="enterselectmain">
		<view class="title-search">
			<up-input placeholder="请输入" suffixIcon="search" suffixIconStyle="color: #909399"></up-input>
		</view>
		<view class="content">
			<view class="" style="width: 30%;">
				<view :class="[actives==index?'leftactive':'left']" v-for="(item,index) in listData" :key="item.id"
					@click="tabactive(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="" style="width: 70%;">
				<view class="right" v-for="item in listData[actives]?.children" :key="item.id" @click="gobacks">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getDoublefloor
	} from '../../../../api/serverData.js'
	let listData = ref([])
	onMounted(() => {
		getDoublefloor().then(res => {
			listData.value = res.data
			console.log(listData.value)
		})
	})
	let actives = ref(0)
	const tabactive = (id) => {
		actives.value = listData.value.findIndex(item => item.id == id)
	}
	const gobacks = () => {
		uni.navigateTo({
			url: '/pages/server/views/FillInTheInforMation/FillInTheInforMation'
		})
	}
</script>

<style lang="scss">
	.enterselectmain {
		.content {
			display: flex;

			.left {
				padding-left: 30rpx;
				height: 100rpx;
				background-color: #f6f7f7;
				line-height: 100rpx;
				font-size: 28rpx;
			}

			.right {
				padding-left: 30rpx;
				height: calc(100rpx - 2rpx);
				font-size: 28rpx;
				line-height: 100rpx;
				border-bottom: 2rpx solid #f6f7f7;
			}
		}

		.leftactive {
			background-color: white;
			color: #049fff;
			padding-left: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
		}

		.title-search {
			padding: 30rpx;

			.u-input {
				background-color: #efefef;
				border: none;
				border-radius: 50px;
				padding: 50rpx;
			}

			.u-input__content__field-wrapper__field {
				padding: 10rpx 20rpx;
			}
		}
	}
</style>